<template>
	<view style="height: 100%;">
		<!-- 遮罩层 -->
		<view class="mask pay-actionsheet-mask" :class="[show?'pay-mask-show':'']"></view>
		<!-- 组件内容 -->
		<view class="bg-light fixed-bottom pay-actionsheet" :class="[show?'pay-actionsheet-show':'']">
			<view class="h2 text-muted" style="position: absolute;top: 0; right: 20rpx;" @tap="handleClose()">×</view>
			<view class="font-weight-bold text-center pt-5">
				<text class="font-lg">开启读书一年VIP:</text>
				<text class="font-lg">￥</text><text class="h2">{{amount}}</text>
			</view>
			<view class="text-center pb-5">
				<text class="font">待支付</text>
			</view>
			<view class="text-center py-5">
				<text class="font-lg font-weight-bold">请选择支付方式</text>
			</view>
			<!-- 支付方式 -->
			<radio-group class="pt-3" @change="select">
				<label v-for="(item,index) in way" :key="index" style="position: relative;"
					class="mx-4 mt-2 bg-white p-3 flex align-center rounded-lg">
					<image :src="Domain_ICON + item.icon" class="rounded" style="width: 35rpx;height: 35rpx;" mode=""></image>
					<text class="font-md ml-2 font-weight-bold">{{item.value}}</text>
					<radio :value="item.value" style="transform:scale(0.7); position: absolute; right: 20rpx;" :checked="item.select" />
				</label>
			</radio-group>
			<view class="px-4 py-2 fixed-bottom ">
				<view class="bg-info rounded text-center py-3 text-white font-weight-bold font" @click="submit()"
					hover-class="bg-hover-info" :hover-stay-time="150">{{payway}}￥{{amount}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import times from '@/mixins/time.js'
	export default {
		data() {
			return {
				loading: false ,//节流
				times:'',
				payway:'微信支付',//支付方式
				balance:'',//用户余额
				collection: {
					Collection_SerialNumber: "",
					Store_SerialNumber: '',
					Sales_Order_SerialNumber: "",
					Collection_Date: '',
					Collection_Amount: 0,
					Sales_Amount: 0,
					Change_Amount: 0,
					Order_Type: 1,
					App_ID: app.globalData.appid,
					Open_ID: app.globalData.openid,
					Enterprise_Info_SerialNumber: app.globalData.enterprise,
					Children: {
						collection_detail: [{
							Collection_Detail_SerialNumber: "",
							Collection_SerialNumber: "",
							Sales_Order_SerialNumber: "",
							Collection_Type: "微信支付",
							Collection_Related_Number: "",
							Amount: 0,
							Gift_Type: 0,
							Gift_Amount: 0,
						}]
					}
				},
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
			}
		},
		props: {
			show: { //显示支付方式
				type: Boolean,
				default: false
			},
			amount: { //总计金额
				type: null,
				default: ""
			},
			sales_order: { //总计金额
				type: Object,
				default: function() {
					return {}
				}
			},
			Article_Name:{//商品名字
				type:Array,
				default:[]
			},
			way: { //支付方式
				type: Array,
				default: function() {
					return [{
						icon: '/WXlogo.png',
						value: '微信支付',
						select: true
					},
					// {
					// 	icon: '/static/icon/Balancepay.png',
					// 	value: '余额支付',
					// 	select: false
					// },
					]
				}
			},
		},
		methods: {
			handleClose() { //关闭
				this.$emit('Close');
			},
			//选中的支付方式
			select(e){
				this.payway = e.detail.value
			},
			submit(){
				uni.showLoading({
					title:'支付中...',
				})
				var _this = this
				if(!this.loading){
					this.loading = true
					uni.request({ //获取书详情
						url: app.globalData.Domain_Name + ' /WXWeChatListeningMember',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: "POST",
						data: {
							Enterprise_Info_SerialNumber:app.globalData.enterprise,
							Sales_Amount:this.amount,
							Collection_Type:'微信支付',
							App_ID:app.globalData.appid,
							Open_ID:app.globalData.openid
						},
						success: (res) => {
							console.log(res)
							let appId = res.data.sdk_appid;
							let timeStamp = res.data.sdk_timestamp+'';
							let nonceStr = res.data.sdk_noncestr;
							let packageX = res.data.sdk_package;
							let signType = res.data.sdk_signtype;
							let paySign = res.data.sdk_paysign;
							if (res.data.result_msg == "SUCCESS") {
									uni.requestPayment({
										provider: 'wxpay',
										appId: appId,
										timeStamp: timeStamp,
										nonceStr: nonceStr,
										package: packageX,
										signType: signType,
										paySign: paySign,
										success: function(res) {
											uni.showToast({
												title: '支付成功！',
												icon: 'success',
												success() {
													uni.hideLoading()
													this.loading = false
													uni.navigateTo({
														url:'/pages/paycomplete/paycomplete?price='+_this.amount
													})
												}
											})
										},
										fail: function(err) {
											console.log(err)
											uni.hideLoading()
											this.loading = false
											uni.showToast({
												title: '已取消！',
												icon: 'error'
											})
										},
										//调起支付后打开懒加载
										complete: () => {
											uni.hideLoading()
										}
									})
								} else {
									this.loading = false
									uni.hideLoading();
									uni.showToast({
										title: '提交失败，请重试！',
										icon: 'error'
									})
								}
						}
					})
				}
			},
			accMul(arg1, arg2) { //浮点型相乘
				let m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length
				} catch (e) {}
				try {
					m += s2.split(".")[1].length
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
			},
			accAdd(arg1, arg2) {	//浮点型相加
				var r1, r2, m;
				try {r1 = arg1.toString().split(".")[1].length} catch (e) {r1 = 0}
				try {r2 = arg2.toString().split(".")[1].length} catch (e) {r2 = 0}
				m = Math.pow(10, Math.max(r1, r2))
				return (arg1 * m + arg2 * m) / m
			},
			time(){
				let year = new Date().getFullYear();
				let month = new Date().getMonth() + 1;
				let days = new Date().getDate();
				let hour = new Date().getHours()
				let minutes = new Date().getMinutes()
				let second = new Date().getSeconds()
				if (month < 10) {
					month = '0' + month
				}
				if (days < 10) {
					days = '0' + days
				}
				if (hour < 10) {
					hour = '0' + hour
				}
				if (minutes < 10) {
					minutes = '0' + minutes
				}
				if (second < 10) {
					second  = '0' + second
				}
				this.collection.Collection_Date = year+'-'+month+'-'+days+' '+hour+':'+minutes+':'+second
			}
		},
		onLoad() {
			console.log(1)
		}
	}
</script>

<style lang="scss">
	.pay-actionsheet {
		width: 100%;
		height: 100%;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}

	.pay-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.pay-actionsheet-mask {
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.pay-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>